<template>
  <div class="dashboard-editor-container home-container">
    <div class="top">
      <div class="homeTop">
        <el-col :xs="24" :sm="24" :lg="6" class="topData">
          <img
            src="@/assets/homeKnow.png"
            alt="企业智库"
            style="width: 35px; height: 35px"
          />
          <span class="backTitle"> 企业智库 </span>
          <el-tooltip
            effect="dark"
            content="今日新增企业智库数量/企业智库总数"
            placement="left-start"
          >
          <span class="backData">
            {{ this.HomeTopData.KnowledgeToday }}/{{this.HomeTopData.KnowledgeTotal }} 条
          </span>
          </el-tooltip>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6" class="topData">
          <img
            src="@/assets/homeSmart.png"
            alt="人工智能"
            style="width: 35px; height: 35px"
          />
          <span class="backTitle"> 人工智能 </span>
          <el-tooltip
            effect="dark"
            content="今日使用人工智能数量/人工智能使用总数"
            placement="left-start"
          >
          <span class="backData">
            {{ this.HomeTopData.ChatTToday }}/{{ this.HomeTopData.ChatTotal }} 次
          </span>
          </el-tooltip>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6" class="topData">
          <img
            src="@/assets/homeAdd.png"
            alt="域名加速"
            style="width: 35px; height: 35px"
          />
          <span class="backTitle"> 域名加速 </span>
          <el-tooltip
            effect="dark"
            content="今日域名加速数量/域名加速总数"
            placement="left-start"
          >
          <span class="backData">
            {{ this.HomeTopData.UrlToday }}/{{ this.HomeTopData.UrlTotal }} 次
          </span>
          </el-tooltip>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="6" class="topData">
          <img
            src="@/assets/homeStudy.png"
            alt="智能学习"
            style="width: 35px; height: 35px"
          />
          <span class="backTitle"> 智能学习 </span>
          <el-tooltip
            effect="dark"
            content="今日知识库训练数量/知识库训练总数"
            placement="left-start"
          >
          <span class="backData">
            {{ this.TrainData.TrainTodayFinish }}/{{
              this.TrainData.TrainTotal
            }} 个
          </span>
          </el-tooltip>
        </el-col>
      </div>
    </div>
    <!-- <panel-group :list="list"/> -->
    <el-row :gutter="16" class="home">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper">
          <!-- 企业智库贡献人员排名 -->
          <!-- <recentlyAccelerated /> -->
          <transversechart />
        </div>
        <div class="chart-wrapper">
          <!-- 企智库分类统计 -->
          <accelerateUsers />
          <!-- <transversechart2/> -->
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper" ref="refChartWrapper">
          <line-chart :chart-data="lineChartData" :height="this.chartHeight" />
        </div>
        <div class="chart-wrapper">
          <transaction-table :height="this.chartHeight" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="chart-wrapper">
          <!-- 加速域名 -->
          <accelerateDomainName />
        </div>
        <div class="chart-wrapper">
          <!-- 系统状态 -->
          <systemStatus :list="list" :Days="Days" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import transversechart from "./components/transversechart"; //企业智库贡献人员排名
import transversechart2 from "./components/transversechart2";
// import PanelGroup from './components/PanelGroup'
import LineChart from "./components/LineChart"; //今日加速流量趋势
import systemStatus from "./components/systemStatus"; //系统状态
import recentlyAccelerated from "./components/recentlyAccelerated"; //最近加速流量排名
import accelerateDomainName from "./components/accelerateDomainName"; //今日加速域名排名
import accelerateUsers from "./components/accelerateUsers"; //企智库分类统计
import TransactionTable from "./components/TransactionTable"; //最近一周人工智能跟踪趋势图
import { formatDuration, parseTime } from "@/utils/index.js";
import { connrequest, GetHistorySumStreamLog } from "@/api/firstPage.js";

export default {
  name: "DashboardAdmin",
  components: {
    // PanelGroup,
    LineChart,
    systemStatus,
    recentlyAccelerated,
    accelerateDomainName,
    accelerateUsers,
    TransactionTable,
    transversechart,
    transversechart2
  },
  data() {
    return {
      lineChartData: {
        UpByte: [],
        DownByte: [],
        TransTime: []
      },
      list: {},
      Days: 0,
      HomeTopData: [],
      TrainData: [],
      chartHeight:"316px"
    };
  },
  mounted() {
    this.getData();
    this.GetHistorySumStreamLog();
    this.GetParamDictURL();
    this.GetHomeTop();
    this.GetTrainData();

    // 根据窗口大小设置eChart高度
    this.handleResize()
    // 监听窗口大小变化，修改eChart高度
    window.addEventListener("resize", this.handleResize)
  },
  methods: {
    async GetHistorySumStreamLog() {
      // 默认取30分钟前
      let date = new Date();
      let i = date.getMinutes();
      let StartTime = parseTime(
        date.setMinutes(i - 30),
        "{y}-{m}-{d} {h}:{i}:{s}"
      );
      // let getNowDay = getNowDay('')
      const data = {
        Filter: {
          StartTime: StartTime
          // Name: "192.168.17.99"
        }
      };
      const res = await GetHistorySumStreamLog(data);
      let lineChartData = { UpByte: [], DownByte: [], TransTime: [] };
      res.Data.forEach((item) => {
        lineChartData.UpByte.push(item.UpRate);
        lineChartData.DownByte.push(item.DownRate);
        lineChartData.TransTime.push(parseTime(item.TransTime, "{h}:{i}"));
      });
      this.lineChartData = lineChartData;
    },
    async getData() {
      const res = await connrequest("GetFirstPage");
      let d = Math.floor(res.Data.KeepRunningSeconds / 3600 / 24);
      let h = Math.floor((res.Data.KeepRunningSeconds % 86400) / 3600);
      let m = Math.floor(((res.Data.KeepRunningSeconds % 86400) % 3600) / 60);
      res.Data.KeepRunningSeconds = `${d < 1 ? "" : d}${
        d < 1 ? "" : "天"
      } ${h}小时 ${m}分钟`;
      res.Data.EthIP = res.Data.EthIP ? res.Data.EthIP : "接口无效";
      res.Data.WifiIP = res.Data.WifiIP ? res.Data.WifiIP : "接口无效";
      let now = new Date().getTime();
      // this.Days = this.dateTrans(res.Data.ValidTime*1000 - now)
      this.Days = Math.ceil((res.Data.ValidTime * 1000 - now) / 86400 / 1000);
      res.Data.ValidTime = parseTime(res.Data.ValidTime, "{y}-{m}-{d}");
      res.Data.CurrentTime = parseTime(res.Data.CurrentTime);
      res.Data.MemUsedPct =
        ((res.Data.MemUsed / res.Data.MemTotal) * 100).toFixed(1) * 1;
      res.Data.MemUsed = (res.Data.MemUsed / 1000000).toFixed(2) + "G";
      res.Data.MemTotal = (res.Data.MemTotal / 1000000).toFixed() + "G";
      res.Data.DiskUsedPct =
        ((res.Data.DiskUsed / res.Data.DiskTotal) * 100).toFixed(1) * 1;
      res.Data.DiskUsed = (res.Data.DiskUsed / 1000000).toFixed(2) + "G";
      res.Data.DiskTotal = (res.Data.DiskTotal / 1000000).toFixed(0) + "G";
      res.Data.AmazonUsedSeconds = formatDuration(res.Data.AmazonUsedSeconds);
      this.list = { ...res.Data };
    },
    // 获取域名分类
    async GetParamDictURL() {
      const res = await connrequest("GetParamDictURL");
      window.sessionStorage.setItem("ParamDictURL", JSON.stringify(res.Data));
    },
    //获取首页顶部数据
    async GetHomeTop() {
      const res = await connrequest("HomePageStats");
      this.HomeTopData = res.Data;
    },
    //获取只能学习数据
    async GetTrainData() {
      const res = await connrequest("GetknowledgeBaseStatus");
      this.TrainData = res.Data;
    },
    handleResize() {
      //延迟执行 优化性能
      setTimeout(()=>{
        if(this.$refs.refChartWrapper){
          this.chartHeight = (this.$refs.refChartWrapper.clientHeight - 52).toString()+"px";
        }
      },100)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
::v-deep .chart-wrapper {
  height: calc(50vh - 85px) !important;
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 16px;
  .el-table--medium th,
  .el-table--medium td {
    padding: 3px 0 !important;
  }
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 3px !important;
  background-color: #f5f5f5 !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
  background-color: #f5f5f5 !important;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
  background-color: #999 !important;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.homeTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
}
.top {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background: #f0f2f5;
}
.topData {
  position: relative;
  color: #000;
  background: #fff;
  padding: 10px !important;
  display: flex;
  border-radius: 4px;
}
.el-col-24 {
  padding-top: 16px;
}
.backData {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.backTitle {
  display: flex;
  align-items: center;
  margin: 5px 10px;
}
.night {
  .chart-wrapper {
    background: #303445;
  }
  .home-container {
    padding: 0;
  }
  .el-row {
    padding: 0 8px;
  }
  .home {
    background-color: #2a2d3c !important;
  }
  .top {
    background: #2a2d3c;
    padding: 16px 16px 0;
  }
  .topData {
    background: #303445;
    color: #fff;
  }
}
</style>
